<template>
	<div class="notice-warp">
		<div class="lbox">
			<themeTitle model="2" title="实时成交"></themeTitle>
		</div>
		<div class="rbox">
			<div class="swiper mySwiper-notice">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item, i) in obj.firstHalf" :key="i">
						<div class="item">
							<div class="txt company line-1">{{ item.title }}</div>
							<div class="txt goods line-1">{{ item.company_name }}</div>
							<div class="txt num">
								<span style="color: red">{{ item.num }}</span>
							</div>
							<div class="txt date">{{ item.time }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper mySwiper-notice-2">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item, i) in obj.secondHalf" :key="i">
						<div class="item">
							<div class="txt company line-1">{{ item.title }}</div>
							<div class="txt goods line-1">{{ item.company_name }}</div>
							<div class="txt num">
								<span style="color: red">{{ item.num }}</span>
							</div>
							<div class="txt date">{{ item.time }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="active-warp">
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		obj: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'notice',
	data() {
		return {};
	},
	computed: {},
	watch: {
		obj(newValue, oldValue) {
			if (this.obj.firstHalf) {
				this.$nextTick(() => {
					this.initSwiper();
					this.initSwiper2();
				});
			}
		}
	},
	created() {},
	mounted() {
		if (this.obj.firstHalf) {
			this.initSwiper();
			this.initSwiper2();
		}
	},
	methods: {
		initSwiper() {
			new this.$Swiper('.mySwiper-notice', {
				direction: 'vertical',
				autoplay: {
					delay: 2000,
					disableOnInteraction: false
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			});
		},
		initSwiper2() {
			new this.$Swiper('.mySwiper-notice-2', {
				direction: 'vertical',

				autoplay: {
					delay: 2000,
					disableOnInteraction: false
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.notice-warp {
	height: 70px;
	padding: 25px;
	background: #ffffff;
	border-radius: 8px 8px 8px 8px;
	display: flex;
	.lbox {
		display: flex;
		align-items: center;
		width: 120px;
		height: 100%;
		flex-shrink: 0;
	}
	.rbox {
		display: flex;
		// flex: 1;
		width: 1240px;
		height: 100%;
		.active-warp {
			// width: 50px;
			position: relative;
			.swiper-button-next {
				top: auto;
				bottom: -25px;
				right: 0px !important;
				transform: rotate(90deg);
				&:hover {
					&::after {
						color: @theme;
					}
				}
				&::after {
					color: #5e5e5e;
					font-size: 15px;
				}
			}
			.swiper-button-prev {
				top: 0px;
				left: auto;
				right: 0px !important;
				transform: rotate(90deg);
				&:hover {
					&::after {
						color: @theme;
					}
				}
				&::after {
					color: #5e5e5e;
					font-size: 15px;
				}
			}
		}
		.mySwiper-notice {
			width: 50%;
			height: 100%;
			.swiper-slide {
				display: flex;
				.item {
					margin-left: 30px;
					width: fit-content;
					font-size: 14px;
					display: flex;
					cursor: pointer;
					&:hover {
						border-bottom: 1px solid #3d3d3d;
					}
					.txt {
						display: inline-block;
					}
					.company {
						// width: 100px;
						color: #3d3d3d;
					}
					.goods {
						margin-left: 15px;
						width: 283px;
						color: #3d3d3d;
					}
					.num {
						margin-left: 15px;
						display: flex;
						color: #3d3d3d;
						span {
							display: block;
						}
					}
					.date {
						margin-left: 20px;
						color: #b7b7b7;
					}
				}
			}
		}
		.mySwiper-notice-2 {
			width: 50%;
			height: 100%;
			.swiper-slide {
				display: flex;
				.item {
					margin-left: 30px;
					width: fit-content;
					font-size: 14px;
					display: flex;
					cursor: pointer;
					&:hover {
						border-bottom: 1px solid #3d3d3d;
					}
					.txt {
						display: inline-block;
					}
					.company {
						// width: 109px;
						color: #3d3d3d;
					}
					.goods {
						margin-left: 15px;
						width: 283px;
						color: #3d3d3d;
					}
					.num {
						margin-left: 15px;
						display: flex;
						color: #3d3d3d;
						span {
							display: block;
						}
					}
					.date {
						margin-left: 20px;
						color: #b7b7b7;
					}
				}
			}
		}
	}
}
</style>
